<template>
    <div id="app">

    <mt-header  title="评论":fixed="is_fixed" >
        			<router-link to="/singer" slot="left">
        				<mt-button icon="back">返回</mt-button>
        			</router-link>
    </mt-header>

<ul class="ui-list ui-border-b">
         <div id="hf">
                      <el-badge is-dot  class="item">
                        <el-button size="small">回复</el-button>
                      </el-badge>
          </div>
          <li>
            <div class="ui-avatar-s">
              <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">
            </div>
            <div><h4>活着</h4>
            </div>
            </br>
            <li><h3>南瓜还是很好吃的</h3></li>
            <hr>

            <li class="pl" v-on:click="music()">
             <div class="ui-list-img">
                <span><img  src="../assets/6.jpg" height="50"></span>
             </div>
             <div class="ui-list-info">
                               <h4 class="ui-nowrap">《南瓜》</h4>
                               <p class="ui-nowrap">我的小南瓜,我有时也会想起其他女孩</p>
              </div>
              </li>

          </li>
           <hr>
           </br>

           <div id="hf">
               <el-badge is-dot  class="item">
               <el-button size="small">回复</el-button>
                </el-badge>
                </div>
                    <li>
                      <div class="ui-avatar-s">
                        <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">
                      </div>
                      <div><h4>摩迪</h4>
                      </div>
                      </br>
                      <li><h3>那一夜我在深深的思念着你</h3></li>
                      <hr>
                      <li class="pl" v-on:click="music2()">
                       <div class="ui-list-img">
                                         <span><img  src="../assets/7.jpg" height="70"></span>
                                     </div>
                                     <div class="ui-list-info">
                                         <h4 class="ui-nowrap">《残破》</h4>
                                         <p class="ui-nowrap">深深的在深夜里坐着,当窗有一团不圆的光亮，</p>
                        </div>
                        </li>
                    </li>
                    <hr>
                    </br>
                    <div id="hf">
                     <el-badge is-dot  class="item">
                             <el-button size="small">回复</el-button>
                               </el-badge>
                           </div>
                                 <li>
                                   <div class="ui-avatar-s">
                                     <img slot="icon" src="../assets/7.png" width="50" height="50" style="float:left">
                                   </div>
                                   <div><h4>兔子</h4>
                                   </div>
                                   </br>
                                   <li><h3>愿上帝与你同在</h3></li>
                                   <hr>
                                   <li class="pl" v-on:click="music3()">
                                    <div class="ui-list-img">
                                                      <span><img  src="../assets/8.jpg" height="70"></span>
                                                  </div>
                                                  <div class="ui-list-info">
                                                      <h4 class="ui-nowrap">《讯 问》</h4>
                                                      <p class="ui-nowrap">在青麦地上跑着,雪和太阳的光芒</p>
                                     </div>
                                     </li>
                                 </li>
                                 <hr>
        </ul>

    <mt-tabbar v-model="selected" fixed>
       <mt-tab-item id="tab-container1" @click.native="openIndex">
        <img slot="icon" src="../assets/1.png">
         关注
       </mt-tab-item>
       <mt-tab-item id="tab-container2" @click.native="openMusic">
      <img slot="icon" src="../assets/2.png">
         发现
       </mt-tab-item>
        <mt-tab-item id="tab-container3" @click.native="openFa">
        <img slot="icon" src="../assets/5.png" width="80">
       </mt-tab-item>
       <mt-tab-item id="tab-container4" @click.native="openSinger">
        <img slot="icon" src="../assets/3.png">
         消息
       </mt-tab-item>
       <mt-tab-item id="tab-container5" @click.native="openUser">
        <img slot="icon" src="../assets/4.png">
         个人
       </mt-tab-item>
    </mt-tabbar>


    </div>
</template>
<script>
import Vue from 'vue'
import { Header } from 'mint-ui';
import { Button } from 'mint-ui';
import { TabContainer, TabContainerItem } from 'mint-ui';
import { Tabbar, TabItem } from 'mint-ui';
import { Cell } from 'mint-ui';


Vue.component('mt-tab-container', TabContainer);
Vue.component('mt-tab-container-item', TabContainerItem);
Vue.component('mt-tabbar', Tabbar);
Vue.component('mt-tab-item', TabItem);
Vue.component('mt-button', Button);
Vue.component('mt-header', Header);
Vue.component('mt-cell', Cell);



    export default {
        name:'app',
        data () {
            return {
                selected:'',
                is_fixed:true
            }
        },
                 methods:{
                             openIndex(){
                 	            this.$router.push({
                 	                path : '/index'
                 	            })
                 	        },
                 	        openMusic(){
                 	            this.$router.push({
                 	                path : '/music'
                 	            })
                 	        },
                 	        openSinger(){
                 	            this.$router.push({
                 	                path : '/singer'
                 	            })
                 	        },
                          openFa(){
                              this.$router.push({
                                  path : '/pai'
                              })
                          },
                 	        openUser(){
                                  this.$router.push({
                                     path : '/user'
                                 })
                              },
                              music:function () {
                                this.$router.push('/music1')
                                              	},
                               music2:function () {
                                  	this.$router.push('/music2')
                                      },
                                music3:function () {
                                   this.$router.push('/music3')
                                                	}
                     	}

    }
</script>
<style>

.button{
top:24px;
left:5px;
}
.mt-cell{
text-align:left;
color:white;
}
.pl{
background-color:#F0F0F0;
}
#hf{
float:right;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}

</style>